<!DOCTYPE html>
<html>
<head>
    <title>欢迎您的到来</title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.min.css">
    <link href="../../resources/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="../../resources/css/plugins/bootstrap-table/bootstrap-table.css"/>
    <link rel="stylesheet" href="../../resources/css/plugins/dialog/bootstrap-dialog.css"/>
    <link rel="stylesheet" href="../../resources/css/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="../../resources/css/pluginsExt/Tabledemo/Tabledemo.css"/>
    <script src="../../resources/js/jquery-2.1.1.js"></script>
    <script src="../../resources/js/bootstrap/bootstrap.min.js"></script>
    <script src="../../resources/js/plugins/bootstrap-table/bootstrap-table.js"></script>
    <script src="../../resources/js/plugins/bootstrap-table/bootstrap-table-zh-CN.js"></script>
    <script src="../../resources/js/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="../../resources/js/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../../resources/js/plugins/bootstrap-fileinput/fileinput.js"></script>
    <script src="../../resources/js/plugins/jqValidate/jquery.validate.min.js"></script>
    <script src="../../resources/js/messages_zh.js"></script>
    <style>
        table {
            table-layout: fixed;
        }
    </style>
</head>
<body>
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="row-fluid">
    <div class="span12">
        <div class="portlet box grey">
            <div class="portlet-body">
                <table id="fullTab" data-click-to-select="true">
                    <div class="bars pull-left">
                        <i class="btn-group hidden-xs" id="exampleToolbar" role="group">
                            <button type="button" class="btn btnAdd btn-outline btn-default">
                                <i class="glyphicon glyphicon-plus" aria-hidden="true">
                                    添加
                                </i>
                            </button>
                            <button type="button" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true">
                                    删除
                                </i>
                            </button>
                            <button type="button" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-adjust"  data-show-refresh="true" aria-hidden="true">
                                    取消关注
                                </i>
                            </button>
                            <button type="button" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-chevron-down"  data-show-refresh="true" aria-hidden="true">
                                    禁用
                                </i>
                            </button>
                        </i>
                    </div>
                    <div class="pull-right">
                        <button class="highSeek btn-primary">高级搜索</button>
                    </div>
                    <div class="pull-right search">
                        <input class="form-control" type="text" placeholder="搜索">
                    </div>
                    <br/>
                    <div class="search pull-left hideForm">
                        <div class="col-md-6">
                            <label for="searchName" class="pull-left col-md-2">
                                姓名：
                            </label>
                            <input type="text" id="searchName" class="form-control col-md-10 pull-left" placeholder="姓名"/>
                        </div>
                        <div class="col-md-6">
                            <label class="pull-left col-md-2">
                                性别：
                            </label>
                            <select class="form-control InputStyle pull-left col-md-10" size="1" name="finished" sb="62975985">、
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select>
                        </div>
                        <div class="col-md-6 birthDate">
                            <label class="pull-left col-md-1">
                                出生日期：
                            </label>
                            <div class="col-md-9 m_left">
                                <div class="pull-left col-md-4">
                                    <div class="input-group date starttime" >
                                        <input class="form-control col-md-12" size="16" type="text" value="" readonly>
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                                    </div>
                                    <input type="hidden" id="dtp_input5" value="" /><br/>
                                </div>
                                <b class="pull-left col-md-2">
                                    &nbsp;至&nbsp;
                                </b>
                                <div class="pull-left col-md-4">
                                    <div class="input-group date endtime" >
                                        <input class="form-control col-md-12" size="16" type="text" value="" readonly>
                                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                                    </div>
                                    <input type="hidden" id="dtp_input6" value="" /><br/>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="ideCard" class="pull-left col-md-2">
                                身份证：
                            </label>
                            <input type="text" id="ideCard" class="form-control col-md-9 pull-left" placeholder="身份证号码"/>
                        </div>
                        <div class="col-md-6">
                            <label class="col-md-2 address" for="provinceId">
                                地址:
                            </label>
                            <div class="col-md-9 chosAes">
                                <select class="form-control InputStyle pull-left" id="provinceId">
                                    <option>请选择省份</option>
                                </select>
                                <select class="form-control InputStyle pull-left" id="cityId">
                                    <option>请选择市</option>
                                </select>
                                <select class="form-control InputStyle pull-left" id="regionID">
                                    <option>请选择区</option>
                                </select>
                                <div>
                                    <textarea  id="expAddress" class="form-control" rows="3" name="intro" placeholder="详细到门牌号"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="sel" class="control-label col-md-2">选择：</label>
                            <div class="col-md-6 selAll">
                                <select multiple="" id="sel" name="sel" class="form-control">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-5 highSeekBtn col-md-offset-6">
                            <button class="btn" type="reset">
                                <a class="highSeekSeh" href="#search">重置</a>
                            </button>
                            <button class="btn btn-primary" type="submit">
                                <a class="highSeekSeh" href="#search">搜索</a>
                            </button>
                        </div>
                    </div>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var $table;
        $(function () {
            initTable();
            $("#btnSearch").click(function () {
                $table.bootstrapTable('refresh');
            });
            $('#btnDelete').click(function () {

            });
            if (document.addEventListener) {
                //如果是Firefox
                document.addEventListener("keypress", enterEvent, true);
            } else {
                //如果是IE
                document.attachEvent("onkeypress", enterEvent);
            }
            $('.btnAdd').click(function(){
                parent.layer.open({
                    type: 2,
                    skin: 'layui-layer-lan',
                    title: '提交',
                    fix: true, //不固定
                    shadeClose: true,
                    shade: 0.3,
                    maxmin: true,
                    area: ['600px', '600px'],
                    content: 'newModule/bootstrap-table-develop/linkForm.html',
//                btn: ['重置', '提交']
//                ,btn1: function(index, layero){
//                    $("input").attr("value","");
//                },btn2: function(index, layero){
//                    //提交按钮的回调
//                    parent.layer.msg('提交成功', {icon: 1});
//                },
                });
            })
        });
        //按下Enter搜索
        function enterEvent(evt) {
            if (evt.keyCode == 13) {
                $("#btnSearch").click();
            }
        }
        $('.highSeek').on('click',function(){
            if($('.hideForm').is(":hidden")){
                $('.hideForm').show(200)
            }else{
                $('.hideForm').hide(200)
            }
        })
        function initTable() {
            $table = $('#fullTab').bootstrapTable({
                striped: true,
                pagination: true,
                singleSelect: false,
                pageSize: 30,
                height:500,
                pageList: [10,30,50, 100, 200, 500],
                showColumns: false, //不显示下拉框（选择显示的列）
                queryParams: queryParams,
                minimunCountColumns: 2,
                columns: [{
                    field: 'state',
                    checkbox: true,
                    width:10,
                }, {
                    field: 'Name',
                    title: '姓名',
                    width: 20,
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                }, {
                    field: 'Birthday',
                    title: '账号',
                    width: 50,
                    align: 'left',
                    valign: 'top',
                    sortable: true
                }, {
                    field: 'Tel',
                    title: '手机',
                    width: 40,
                    align: 'left',
                    valign: 'top',
                    sortable: true,
                },
                    {
                    field: 'Address',
                    title: '邮箱',
                    width: 20,
                    align: 'left',
                    valign: 'top',
                    sortable: true
                },{
                    field: 'aa',
                    title: '状态',
                    width: 40,
                    align: 'left',
                    valign: 'top',
                    sortable: true,
                }],
                data:[{
                    Name:'张三',
                    Birthday:'zhangsan',
                    Address:'',
                    Tel:'13901232130',
                    Mobile:'13901232130',
                },{
                    Name:'李四',
                    Birthday:'lisi',
                    Address:'',
                    Tel:'13901232112',
                    Mobile:'13901232130',
                },{
                    Name:'陈五',
                    Birthday:'chenwu',
                    Address:'',
                    Tel:'13901232120',
                    Mobile:'13901232130',
                    aa:'禁用'
                }],
                onLoadSuccess:function(){

                },
            });
        }

        function queryParams(params) {
            return {
                pageSize: params.pageSize,
                pageIndex: params.pageNumber,
                UserName: $("#txtName").val(),
                Birthday: $("#txtBirthday").val(),
                Gender: $("#Gender").val(),
                Address: $("#txtAddress").val(),
                name: params.sortName,
                order: params.sortOrder
            };
        }
        //
        //删除完成执行的动作
        function nameFormatter(value, row) {
            var icon = row.id % 2 === 0 ? 'glyphicon' : 'glyphicon'
            return '<i class="glyphicon ' + icon + '"></i> ' + value;
        }
        //
        function sexFormatter(value) {
            // 16777215 == ffffff in decimal
            var color = '#' + Math.floor(Math.random() * 6777215).toString(16);
            var txtSex="保密";
            if (value == "Gender") {
                txtSex = "性别";
            }
            else if (value == "F") {
                txtSex = "女";
                color='Red';
            }
            else if (value == "M") {
                txtSex = "男";
                color = 'Green';
            }
            else {
                txtSex = "保密";
                color = 'Yellow';
            }
            return '<div  style="color: ' + color + '">' +  txtSex +'</div>';
        }
        function operateFormatter(value, row, index) {
            return [
                '<a class="edit btn btn-xs btn-default" data-toggle="modal" data-target="#edit" style="margin-left:10px"title="编辑">',
                '<i class="glyphicon glyphicon-pencil"></i>',
                '</a>',
                '<a class="remove btn btn-xs btn-default" style="margin-left:10px" title="移除">',
                '<i class="glyphicon glyphicon-trash"></i>',
                '</a>'
            ].join('');
        }
        $(".starttime").datetimepicker({
            language:'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            showMeridian:true,
            pickDate:true,
            format: "yyyy-mm-dd"
        }).on('changeDate',function(ev){
            var starttime=$('.starttime input').val();
            $('.endtime').datetimepicker('setStartDate',starttime);
            $('.starttime').datetimepicker('hide');
        });
        $('.form_date').datetimepicker({
            language:'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            format: "yyyy"+'年'+" m"+'月'+" dd"+'日'
        });
        $('.endtime').datetimepicker({
            language:'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            format: "yyyy"+'-'+"mm"+'-'+"dd"
        }).on('changeDate',function(ev){
            var starttime=$('.starttime').val();
            var endtime=$('.endtime').val();
            if(starttime!=null&&endtime!=null){
                if(!checkEndTime(starttime,endtime)){
                    $('.endtime').val('');
                    alert('开始时间大于结束时间')
                    return
                }
            }
            $('.starttime').datetimepicker('setEndDate',endtime);
            $('.starttime').datetimepicker('hide');
        });
        $('.starttime').datetimepicker('setEndDate',getCurentTime());
        $('.endtime').datetimepicker('setStartDate',getCurentTime());
        $('.starttime').val(getCurentTime());
        $('.endtime').val(getCurentTime());
        function checkEndTime(startTime, endTime) {
            var start = new Date(startTime.replace("-", "/").replace("-", "/"));
            var end = new Date(endTime.replace("-", "/").replace("-", "/"));
            if (end < start) {
                return false;
            }
            return true;
        };
        function getCurentTime() {
            var now = new Date();

            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();

            var hh = now.getHours();
            var mm = now.getMinutes();
            var ss = now.getSeconds();

            var clock = year + "-";

            if (month < 10)
                clock += "0";

            clock += month + "-";

            if (day < 10)
                clock += "0";

            clock += day + " ";

            if (hh < 10)
                clock += "0";

            clock += hh + ":";
            if (mm < 10)
                clock += '0';
            clock += mm + ":";
            if (ss < 10)
                clock += '0';
            clock += ss ;
            return (clock);
        };
    </script>
</div>
</body>
</html>
